<template>
    <div>
        <div style="width: 100%; background-color: white; height: 50px; text-align: center; margin-bottom: 15px; line-height: 50px;">
            科室选择：<el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.id" :label="item.deptName" :value="item.id">
                    </el-option>
                    </el-select>
                    <el-button type="primary" style="margin-left: 10px;" @click="finduser">查找</el-button>
                    <el-button type="primary" @click="reset">清空</el-button>       
        </div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="realName" label="姓名" width="120">
            </el-table-column>
            <el-table-column  v-for="(v,index) in 14" :key="index" :label="'星期'+days[(Math.ceil((index+1)/2))-1]+((index+1)%2==1?'上午':'下午')" prop="week">
              <template slot-scope="scope">
                  <el-checkbox :checked="scope.row.week[index]==1?true:false" @change="changestatus(index,scope.$index)"></el-checkbox>
                  {{index+1}}
              </template>
            </el-table-column>
            
            <el-table-column fixed="right" label="规则名称" width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.ruleName" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="删除状态" width="100">
              <template slot-scope="scope">
                {{scope.row.delMark==1?'正常':'错误'}}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="warning" @click="changesend(scope.row)">修改</el-button>
              </template>
            </el-table-column>
         
        </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
        <div style="text-align: center;">
            规则名称：<el-input v-model="rulesname" style="width:180px"></el-input>
            添加用户：<el-select v-model="value2" placeholder="请选择">
                          <el-option v-for="item in userlist" :key="item.id" :label="item.realName" :value="item.realName">
                          </el-option>
                      </el-select>
                      <el-button type="danger" @click="addrule()">添加</el-button>
                      <el-button type="primary" @click="sendaddperson">新增排版规则</el-button>
        </div>
    </div>
</template>

<script>
import schedule from '@/api/his/schedule';
import httpaxios from '../../api/his/schedule'
    export default {
    mounted() {
        //  this.$refs.multipleTable.toggleRowSelection(this.tableData[0],true);
       
    },
    created() {
      //下拉框的数据：获取全部科室
      httpaxios.getDeptList().then(res=>{
          this.options=res.data.data.list;
        })
        //首页加载的数据：请求所有排班的人
      httpaxios.getAllUserRole().then(res=>{
        this.tableData=res.data.data.list;
      })
      //获取该科室所有的用户
      httpaxios.getUserByDeptID(0).then(res=>{
       this.userlist=res.data.data.list
       for(var i=0;i<this.userlist.length;i++){
         this.usernamelist.push(this.userlist[i].realName)
       }
      })
    },
    methods: {
      //首列多选框的排它思想的实现
        toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //上面下拉框的清空
      reset(){
        this.value=''
        httpaxios.getAllUserRole().then(res=>{
        this.tableData=res.data.data.list;
      })

      },
      //点击单选框改变字符串
      changestatus(charindex,rowindex){
        var str= this.tableData[rowindex].week
       var newstr= this.returnstr(str,charindex)
        this.tableData[rowindex].week=newstr
        console.log(this.tableData[rowindex].week);
        console.log(this.tableData);
      },
      //辅助函数 返回新字符串 
      returnstr(oldstr,index){
       var newstr= oldstr.substring(0,index)+(oldstr[index]==1?0:1)+oldstr.substring(index+1,oldstr.lengh)
       return newstr
      },
      //修改排班规则
      changesend(data){
        httpaxios.updateRole(data).then(res=>{
        })
      },
      //查找当前科室  排班的人和排班信息
      finduser(){
        this.tableData=[]
        httpaxios.getUserRole(this.value).then(res=>{
          this.tableData=res.data.data.list
        })
        //寻找该科室的所有用户
        httpaxios.getUserByDeptID(this.value).then(res=>{
          this.userlist=res.data.data.list
          //  console.log(this.userlist);
          this.usernamelist=[]
          this.userlist.forEach(val=>{
            this.usernamelist.push(val.realName)
          })
        })
      },
      //给当前展示用户添加空排班规则
      addrule(){
       var index= this.usernamelist.indexOf(this.value2)
        this.tableData.push({
          delMark:1,
          userID:this.userlist[index].userID,
          week:'00000000000000',
          ruleName:this.rulesname,
          deptID:this.userlist[index].deptID,
          realName:this.userlist[index].realName
        })
        
      },
      sendaddperson(){
        var obj={
          week:this.tableData[this.tableData.length-1].week,
          delMark:this.tableData[this.tableData.length-1].delMark,
          deptID:this.tableData[this.tableData.length-1].deptID,
          ruleName:this.tableData[this.tableData.length-1].ruleName,
          userID:this.tableData[this.tableData.length-1].userID,
        }
        console.log(obj);
        httpaxios.addRule(obj).then(res=>{
          console.log(res);
        })
      }
    },
    data() {
      return {
        days:['一','二','三','四','五','六','日'], //周字典
        tableData: [],  //排班信息
        rulesname:'',//下面添加的规则名
        multipleSelection: [],//首列多选框的状态存储
        options: [],//上面下拉框的数据
        value: '',//上面的 下拉框当前选择的值
        value2: '',//下面的  下拉框当前选择的值
        userlist:[],//该科室所有人员的信息
        usernamelist:[]//该科室下
      }
    }
  }

</script>

<style scoped>
.searchHeader{
    margin-top: 2%;
}
.header_select{
    margin: 0 10px;
}
.header_tag{
    font-weight: 600;
}
h4{
    display: inline;
}
.el-row{
    text-align: center;
}
</style>